<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智医</title>
    <style>
        body {
            background-color: #f4efef;
        }
        
    </style>
    <style>
        /* 自定义样式 */
        .top-div {
            background-color: #ffffff; 
            color: #000000;
            text-align: center;
            padding: 12px 12px 12px 12px;
            border-radius: 15px 15px 15px 15px;
            margin: 12px 12px 12px 12px;
        }
        .container {
            background-color: #f4efef;
            justify-content: space-between;
            display: flex;
            padding: 0 12px;
            height: calc(85vh);
            border-radius: 15px 15px 15px 15px;
        }

        .containerin {
            background-color: #ffffff;
            flex-direction: column; /* 将排列方向改为垂直方向 */
            align-items:flex-start;; 
            display: flex;
            padding: 0 12px;
            height: calc(85vh);
            border-radius: 15px 15px 15px 15px;
        }


        /* 滚动条里的小方块 */
        .box::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #eee;
        }
 
        /* 滚动条整体样式 */
        .box::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            /* //高宽分别对应横竖滚动条的尺寸 */
        }
 

        .containerin::after {
            content: "";
            display: table;
            clear: both;
        }
 

        .top-container {
            background-color: #f4efef;
            text-align: center;
            border-radius: 15px 15px 15px 15px;
            padding: 20px;
            position: absolute;
            top: 20px; /* 上边距 */
            left: 15px; /* 左边距 */
            right: 15px; /* 右边距 */
            z-index: 1;
        }

        .top-container h1 {
        margin: 0; /* 移除默认的上下外边距 */
        font-size: 24px; /* 字体大小 */
        font-weight: bold; /* 字体粗细 */
        color: #2a0000; /* 文字颜色 */
        text-transform: uppercase; /* 文字转换为大写 */
        }

        .left {
            background-color: rgb(255, 255, 255);
            width: 73%;
            border-radius: 15px 15px 15px 15px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; 
            position: relative; 
        }

        .dropdown-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255);
        width: 25%;
        border-radius: 15px;
        padding: 20px;
        box-sizing: border-box;
    }

    .dropdown-group select {
        margin-bottom: 10px;
        width: calc(100% - 20px); /* 去掉边框宽度 */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        font-size: 16px;
        color: #333;
    }

    /* 鼠标悬停效果 */
    .dropdown-group select:hover {
        border-color: #999;
    }

    /* 选中效果 */
    .dropdown-group select:focus {
        outline: none;
        border-color: #66afe9;
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
    }

    /* 下拉选择框之间的间距 */
    .dropdown-group select + select {
        margin-top: 10px;
    }

    .dropdown-group label {
        margin-bottom: 15px;
        margin-right:50px;
    }

    .file-upload {
        display: none;
        background-color: #f4efef;
        color: #000000;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: 10px;
    }


    .submitButton {
    display: none; /* 默认隐藏 */
    background-color: #f4efef; /* 背景颜色 */
    color: #000000; /* 文字颜色 */
    padding: 10px 20px; /* 内边距 */
    border: none; /* 移除边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s; /* 过渡效果 */
    margin-top: 16px;
    }

    .submitButton:hover {
    background-color: #f9e1e1; /* 悬停时的背景颜色 */
    }

/* 输入框和发送按钮样式 */
.input-area {
        display: flex;
        align-items: center;
        margin-top: 12px; /* 与消息展示区域的间距 */
    }
    

    .input-area input[type="text"] {
        flex: 1;
        padding: 15px;
        border-radius: 5px;
        border: 3px solid  #f4efef;
        margin-right: 10px;
        overflow: scroll;
    }

    .input-area button {
        padding: 15px 20px;
        border: none;
        background-color: #f9bcbc;
        color: #ffffff;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .input-area button:hover {
        background-color: rgb(253, 148, 148);
    }

    /* CSS styles for the button */
    .dialogueTypeButtonAbove {
        background-color:  #f9bcbc;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
     }

/* Hover effect */
    .dialogueTypeButtonAbove:hover {
    background-color: #fda6a6; 
    }

    .box {
            width: 100%;
            height: 80%;
            overflow: auto;
        }

    .leftcustomStyle {
    background-color: #f4efef;
    padding: 1px;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 3px solid #ffc9c9;
    font-size: 8px;
    line-height: 1.5; 
    font-family: '黑体', SimSun, sans-serif;
    /* 其他自定义样式 */
    }

    .rightcustomStyle {
    background-color: #fdd4d4;
    padding: 1px;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 3px solid #f4cdcd;
    font-size: 8px;
    line-height: 1.5; 
    font-family: '黑体', SimSun, sans-serif;
    /* 其他自定义样式 */
    }


        
 

    </style>

    <link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
    <script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>
    <!-- {#    <script src="/js/config.js"></script>#} -->


</head>
<body>

<div class="top-div">
    <img src="../static/image/3.png" style="margin-left: 15px; max-width: 100%; max-height: 100%;" />
</div>

<div class="container">
<div class="left">
    <div class="top-container">
        <h1>欢迎使用智能对话库👏</h1>
    </div>
    <div class="box">
        <div class="containerin" id="containerin">
            <!-- 消息展示区域 -->
        </div>
    </div>
    <div class="input-area">
        <input type="text" id="messageInput" placeholder="提出你的想法……">
        <!-- <button id="sendButton" disabled >发送</button> -->
        <button id="sendButton">发送</button>
    </div>

</div>

    <div class="dropdown-group">
        <button class="dialogueTypeButtonAbove" id="dialogueTypeButtonAbove">启动对话</button>
        <label for="dropdown1">对话类型</label>
        <select id="dropdown1" name="dropdown1">
            <option value="option1">单轮对话</option>
            <option value="option2">多轮对话</option>
        </select>
        <label for="dropdown1">知识库类型</label>
        <select id="dropdown2" name="dropdown2">
            <option value="option1">通用知识库</option>
            <option value="option2">自定义知识库</option>
        </select>
        <input type="file" id="fileUpload"  class="file-upload">
        <!--<button class="submitButton" id="submitButton" style="display: none;">构建知识库</button>-->

    </div>
</div>

<script>
    // 获取选择框元素
    var dropdown2 = document.getElementById('dropdown2');
    var fileUpload = document.getElementById('fileUpload');
    var submitButton = document.getElementById('submitButton');

    // 监听选择框的变化
    dropdown2.addEventListener('change', function() {
        // 如果选择的是 Option 2，则显示文件上传按钮；否则隐藏
        if (dropdown2.value === 'option2') {
            fileUpload.style.display = 'block';
            submitButton.style.display = 'inline-block';
        } else {
            fileUpload.style.display = 'none';
            submitButton.style.display = 'none'; // 隐藏提交按钮
        }
    });


document.getElementById('dialogueTypeButtonAbove').addEventListener('click', function() {
    // 当点击dialogueTypeButtonAbove按钮时，启用sendButton按钮
    // document.getElementById('sendButton').removeAttribute('disabled');
    if (dropdown2.value === 'option1') {  //通用
        const BASE_URL = 'http://127.0.0.1:5050';
        $.ajax({
          type: 'POST',
          url: BASE_URL + '/start_general',
          success: function(data) {
            alert(data.message);
          },
          error: function() {
            alert('调用后端函数失败');
          }
        });
        } else {       //自定义
            if(document.getElementById('fileUpload').value==='')return;
            uploadFile();
        }

});

//自定义
function uploadFile() {
            var fileInput = document.getElementById('fileUpload');
            var file = fileInput.files[0];

            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            const BASE_URL = 'http://127.0.0.1:5050';
            xhr.open('POST', BASE_URL + '/start_individual', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    // 处理返回结果
                    console.log(response.message);
                } else {
                    // 处理错误情况
                    console.error('提交文件失败');
                }
            };
            xhr.send(formData);
        }

//聊天框
    const box = document.querySelector('.box') // 外层盒子
    const customBtn = document.getElementById('sendButton') // 点击发送按钮
    let customInp = document.getElementById('messageInput') // 发送信息
    const containerin = document.getElementById('containerin') // 包裹聊天框盒子


    customBtn.onclick = () => {
            console.log("sendButton clicked!")
            if (!customInp.value) return
            let div = document.createElement('div')
            div.className = 'rightcustomStyle item'
            div.innerHTML = `<h1>${customInp.value}</h1>`
            containerin.appendChild(div)
            var textInput = customInp.value;
            customInp.value = '';
            sendMessage(textInput);
        }


        function currentDownScroll() {
            box.scrollTo({
                top: container.clientHeight,
                // top: containerin.clientHeight,
                behavior: "smooth"
            })
        }
        currentDownScroll()

        //收发信息
        function sendMessage(textInput) {
            // let textInput = document.getElementById('messageInput').value
            console.log(textInput) // 打印收到的信息。
            const BASE_URL = 'http://127.0.0.1:5050';
            $.ajax({
                url: BASE_URL + '/SendMessage',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({ "sentence": textInput }),
                success: function(newResponse) {
                    var message = newResponse.Message;
                    let div = document.createElement('div')
                    div.className = 'leftcustomStyle item'
                    div.innerHTML = `<h1>${message}</h1>`
                    containerin.appendChild(div)
                }
            });
        }


 
    

</script>



</body>
</html>
